import React, { useState } from 'react';
import { is_empty, PanelTitle, BtGroup, BtToggle, FieldView, Title, Ret } from 'sui';

const ColView = ({ hreturn, title, subtitle, list, cur }) => {
    const [mod, setMod] = useState(cur);

    const get = (v) => {
        if (is_empty(list)) {
            return "";
        }

        const f = list.find(d => d.sn === v);
        if (f) {
            return f.name;
        }

        return "";
    };

    const get_fix = (v) => {
        if (is_empty(list)) {
            return null;
        }

        const f = list.find(d => d.sn === v);
        if (f) {
            return f.fix;
        }

        return null;
    };

    const Left = () => {
        const getBtn = () => {
            if (is_empty(list)) {
                return null;
            }

            if (list.length === 1) {
                return null;
            }

            return list.map(d => <BtToggle key={d.sn} value={d.sn}>{d.name}</BtToggle>);
        };

        return (
            <div className="inline-flex items-center">
                <Title mod={title} sub={subtitle} className="mr-32"/>
                <BtGroup value={mod} exclusive onChange={(e, v) => setMod(v)}>
                    {getBtn()}
                </BtGroup>
            </div>
        );
    };

    const Right = () => (
        <div className="inline-flex">
            <Ret hcmd={hreturn}/>
        </div>
    );

    return (
        <div className="flex flex-col">
            <PanelTitle cl="gray" left={<Left/>} right={<Right/>}/>
            <FieldView title={get(mod)} fix={get_fix(mod)} mod={mod}/>
        </div>
    );
};

export {ColView};
